<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<div id="app">
    <input type="text" name="name" v-model="user.uname"><button v-on:click="checkName">check</button><br>
    <input type="password" name="pass" v-model="user.pass"><br>
    <input type="password" name="repass"><br>
    <input type="date" name="birth"  v-model="user.birth"><br>
    <input type="tel" name="tel"  v-model="user.tel"><br>
    <input type="email" name="email" v-model="user.email"><br>
    <input type="text" name="realname" v-model="user.realname"><br>
    <button v-on:click="regist()">注册</button>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            user:{
                uname:'',
                realname:'',
                pass:'',
                birth:'',
                tel:'',
                email:''
            }
        },
        methods:{
            checkName:function(){
                //向服务器发起请求：检测当前用户昵称是否可用
                _this=this;
                $.ajax({
                    url:'/user/check',
                    data:{name:_this.user.uname}, // {\"names\":\"test\"}  "{\"name\":\"hello\"}"
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        if(res.code==201){
                            alert(res.msg);
                        }
                    },
                    error:function(){
                        //请求失败时 0 1 2 3 4
                    }

                });
            },
            regist:function(){
                // this.user;在方法里直接访问属性
                _this=this;//此时表示vue对象
                $.ajax({ //this在ajax里表示ajax对象
                    url:'/user/regist',
                    data: _this.user,
                    type:'post',
                    dataType:'json',
                    success:function(res){
                        //成功注册，跳转登录；
                        if(res.code==200){
                            location.href="/url/login";
                        }else{
                            //注册失败，停留在当前页面
                            alert(res.msg);
                        }

                    }
                });
            }
        }
    });
</script>
</body>
</html>